<template>
	<i-drawers v-model="showCar" @change="showCar = false" bodyHeight="900rpx">
		<view class="car_number">
			<view class="car_title">
				<view></view>
				<view>车牌号</view>
				<view class="image" @click="showCar = false">
					<image src="../../static/images/close_gray_icon.png" mode=""></image>
				</view>
			</view>
			<car-number-input :shopPop="showCar" @numberInputResult="numberInputResult"
				:defaultStr="defaultNum"></car-number-input>
			<view class="" style="height: 48rpx;"></view>
			<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32" @click="submit"
				:disabled="disabled">保存</i-buttons>
		</view>
	</i-drawers>
	<view class="confirm_off">
		<view style="height: 20rpx;"></view>
		<i-card padding="64rpx 32rpx">
			<view class="off_title">
				<i-price :size="32">{{order_detail.realAmount}}</i-price>
				<text class="text">商品价格</text>
			</view>
			<view class="shop_list">
				<view class="shop_item"
					:style="{borderBottom :index === order_detail.childOrders.length - 1 ? '' : '1rpx solid #f3f4f5'}"
					v-for="(item,index) in order_detail.childOrders" :key="index">
					<view class="item_left">
						<view class="serviceName">
							<text class="names">{{item.serviceName}}</text>
							<text>x {{item.goodsNum}}</text>
						</view>
						<view class="item_sku" v-if="item.skuName">
							<text>{{item.skuName}}</text>
							<text>{{item.volume}}</text>
						</view>
						<view class="order_price">
							<i-price>{{item.realAmount}}</i-price>
							<view class="on_price">
								¥{{item.amount}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<i-orderItem padding="12rpx 0" :border="false" title="购买用户" :content="order_detail.nickName"></i-orderItem>
			<i-orderItem padding="12rpx 0" :border="false" v-if="order_detail.vno && order_detail.merType!='1'" title="车牌号"
				:content="order_detail.vno"></i-orderItem>
			<i-orderItem padding="12rpx 0" :border="false" title="有效期" :content="order_detail.effTime"></i-orderItem>
			<i-orderItem padding="12rpx 0" :border="false" title="消费券码" :content="order_detail.qrNo"></i-orderItem>
			<i-orderItem padding="12rpx 0" :border="false" title="订单号" :content="order_detail.merOrderId"></i-orderItem>
		</i-card>
		<view :style="{height: staffList.length ? '500rpx' : '180rpx'}"></view>
		<view class="float">
			<view class="buttons">
				<view class="sa_title" v-if="staffList.length && order_detail.merType!='1'">
					选择施工人员
				</view>
				<view class="staffList" v-if="staffList.length && order_detail.merType!='1'">
					<text @click="selectStaff(item, index)" :class="{active: active === index}" class="staff_item"
						v-for="(item,index) in staffList" :key="index">{{item.clerkName}}</text>
				</view>
				<i-buttons :disabled="showBot" radius="4" padding="16rpx 84rpx" size="32" color="#fff" bgColor="#FB652E"
					@click="confirm">确认核销</i-buttons>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		navTo,
		showTost,
	} from '../../utils/common'
	import {
		servicesList,
	} from '../../utils/enums'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		apiMerOrderDetailByQrCode,
		apiUse
	} from '../../api/order'
	import {
		bindVno
	} from '../../api/index'
	import {
		listMerClerk,
	} from '../../api/store'

	const order_detail = ref<any>({})
	const showCar = ref(false)
	const disabled = ref(true)
	const defaultNum = ref('')
	const defaultCarNum = ref('')
	const showBot = ref(false)
	const active = ref(-1)
	const staffList = ref([])
	const selectStaffData = reactive({
		"builderUserId": "",
		"builderUserName": "",
	})


	onLoad((option) => {
		if (option && option.qrCode) {
			getPageData(option.qrCode)
		}
	})

	const getPageData = async (qrCode : string) => {
		try {
			const {
				data
			} = await apiMerOrderDetailByQrCode({
				qrCode
			})
			order_detail.value = data
			if (!data.vno && data.merType!='1') {
				showCar.value = true
			}
		} catch (e) {
			showBot.value = true
			setTimeout(() => {
				navTo('', 'navigateBack')
			}, 1000)
		}
	}


	const numberInputResult = (e : string) => {
		defaultCarNum.value = e
		disabled.value = e.replace(/\s+/g, '').length < 8
	}

	const submit = async () => {
		const carVno = defaultCarNum.value.replace(/\s+/g, '').replace(/\·/g, '')
		await bindVno({ userId: order_detail.value.userId, vno: carVno, userName: order_detail.value.nickName })
		showTost('绑定成功')
		getPageData(order_detail.value.qrNo)
		showCar.value = false
	}
	const confirm = async () => {
		await apiUse({ merOrderId: order_detail.value.merOrderId, ...selectStaffData })
		showTost('核销中！', () => {
			navTo('/pages/views/result_off?type=success', 'redirectTo')
		})
	}

	const getPageList = async () => {
		const data = await listMerClerk({
			tyjPageNum: 1,
			tyjPageSize: 30
		})
		staffList.value = data.rows
	}

	const selectStaff = (item : any, index : number) => {
		selectStaffData.builderUserId = item.userId
		selectStaffData.builderUserName = item.nickName
		active.value = index
	}

	onMounted(() => {
		getPageList()
	})
</script>

<style lang="scss" scoped>
	.confirm_off {
		width: 100%;
		min-height: 100vh;
		background-color: $backColor;

		.off_title {
			@include flexCC;

			.text {
				@include dfont(26rpx);
				margin-top: 16rpx;
				color: #a0a0a0a;
			}

		}

	}

	.car_number {
		height: 900rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.car_title {
			@include flexRS;
			padding-bottom: 48rpx;

			.image {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.shop_list {
		margin-bottom: 46rpx;

		.shop_item {
			@include flexRS;
			padding: 24rpx 0;

			.item_left {
				@include flexC;
				width: 100%;

				.serviceName {
					@include flexRS;
					@include dfont(28rpx);
					margin-bottom: 8rpx;

					.names {
						width: 90%;
						@include overflow;
						@include titlefont(28rpx);
					}
				}

				.item_sku {
					@include flexR;
					margin-bottom: 8rpx;

					text {
						@include dfont(26rpx);
						color: #A0A0AD;
						margin-right: 16rpx;
					}
				}
			}

			.item_r {
				@include dfont;
			}

			.order_price {
				@include flexR;
				margin-bottom: 20rpx;

				.on_price {
					@include dprice(26rpx);
					color: #A0A0AD;
					margin-left: 8rpx;
					margin-bottom: 2rpx;
					text-decoration: line-through;
				}
			}
		}
	}

	.float {
		@include flexC;
		position: fixed;
		z-index: 1;
		bottom: 0;
		width: 100%;
		background-color: #fff;

		.buttons {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			padding: 32rpx 0;

			.sa_title {
				@include titlefont(32rpx);
				margin-bottom: 24rpx;
			}

			.staffList {
				height: 196rpx;
				@include flexR;
				align-items: flex-start;
				flex-wrap: wrap;
				border-bottom: 1rpx solid #f3f4f5;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				overflow-y: scroll;

				.staff_item {
					@include flexRC;
					@include dfont(26rpx);
					padding: 0 24rpx;
					height: 60rpx;
					background: $background-color;
					border-radius: 30rpx;
					margin: 10rpx;
					border: 2rpx solid #F3F4F5;
					transition: all 0.3s;
				}

				.active {
					background: rgba(251, 101, 46, 0.1);
					border: 2rpx solid #FB652E;
				}
			}


		}
	}
</style>